<template>
    <view class="details">
        <view class="title">
            {{sign_info.name}}
        </view>
        <view class="activity-type" v-if="participateInState != 1">
            <view class="tabs">
                <text v-for="item in tabs" :key="item.id" :class="[{active: tabIndex==item.id}]" @click="changeTab(item.id)">{{item.name}}</text>
            </view>
            <view v-if="tabIndex==0" class="sign-up">
                <view class="sign-item">
                    <text class="name">姓名</text>
                    <view class="input">
                        <input type="text" disabled :value="sign_info.name" placeholder="请输入姓名" placeholder-style="color: #BEC2CC" >
                    </view>
                </view>
                <view class="sign-item">
                    <text class="name">班级</text>
                    <view class="input">
                        <input type="text" disabled :value="sign_info.clas" placeholder="请输入班级" placeholder-style="color: #BEC2CC" >
                    </view>
                </view>
                <view class="sign-item">
                    <text class="name">MBTI人格</text>
                    <text v-if="sign_info.id">{{sign_info.mbti}}</text>
                    <uni-combox
                        v-else
                        ref="combox"
                        class="select-filter"
                        :candidates="mbti_list"
                        placeholder="请选择一个MBTI人格"
                        :border="false"
                        v-model="sign_info.mbti"
                        @change="comboxChange"></uni-combox>
                </view>
                <view class="sign-item">
                    <text class="name">个人简介</text>
                    <view class="input">
                        <textarea type="text" :disabled="sign_info.id?true:false" :value="sign_info.brief" placeholder="请输入个人简介" placeholder-style="color: #BEC2CC" @input="profileInput"></textarea>
                    </view>
                </view>
            </view>
            <view v-else-if="tabIndex==1" class="participation">
                <view class="sign-item">
                    <text class="name">作品上传</text>
                    <view class="input">
                        <upload-btn
                            v-if="work_files.length==0"
                            :icon-info="{width: '180rpx', icon: '/static/add.png'}"
                            type="file"
                            @chooseFile="chooseFile"
                        ></upload-btn>
                        <view v-if="work_files.length>0" style="position: relative;">
                            <image v-if="!work_id" class="close-btn" @click="work_files.splice(0)" src="/static/chat/close.png" mode="aspectFill"></image>
                            <zy-file v-for="(file, i) in work_files" :key="i" :src="file.path" :name="file.name" :size="file.size" :width="'460rpx'"></zy-file>
                        </view>
                    </view>
                </view>
                <view class="sign-item">
                    <text class="name">作品简介</text>
                    <view class="input">
                        <textarea type="text" :disabled="work_id?true:false" :value="work_profile" placeholder="请输入作品说明" placeholder-style="color: #BEC2CC" @input="workProfileInput"></textarea>
                    </view>
                </view>
            </view>
            <view v-else-if="tabIndex==2" class="results">
                <view v-if="activityResult.evaluate_account_id">
                    <view class="res-item">
                        <text class="name">恭喜您获得：</text>
                        <view class="score">
                            <text class="medal-name">{{ activityResult.medal_name }}</text>
                            <image src="/static/jiangpai.png" mode="aspectFill"></image>
                            <text class="score-text">{{activityResult.evaluation}}</text>
                        </view>
                    </view>
                    <view class="tea-eva">
                        <view class="eva-title">
                            <text>老师评语</text>
                        </view>
                        <view class="eva-content">
                            <view class="info-time">
                                <view class="tea-info">
                                    <image :src="utils.headImage(allMembers[activityResult.evaluate_account_id])" mode="aspectFill"></image>
                                    <text>{{allMembers[activityResult.evaluate_account_id]?allMembers[activityResult.evaluate_account_id].name:''}}老师</text>
                                </view>
                                <text style="color: #999999;font-size: 24rpx;">{{handleTime(activityResult.evaluate_time)}}</text>
                            </view>
                            <view class="eva-score">
                                <image src="/static/score1.png" v-for="i in activityResult.score_teacher" :key="i"  mode="aspectFill" ></image>
                            </view>
                            <view class="eva-text">
                                {{activityResult.evaluate_content}}
                            </view>
                        </view>
                    </view>
                </view>
                <view v-else style="margin-top: 32rpx;color: #999999;font-size: 30rpx;text-align: center;">暂无活动结果</view>
            </view>
            <view v-else-if="tabIndex==3" class="experience">
                <view v-if="activityResult.realize_content" class="text-box-show">
                    <text>{{activityResult.realize_content}}</text>
                </view>
                <view v-else style="margin-top: 32rpx;color: #999999;font-size: 30rpx;text-align: center;">暂无活动心得</view>
            </view>
        </view>
        <view class="task-box" v-else-if="participateInState == 1">
            <view class="task-title">
                <view class="title-text">{{activityInfo.title}}</view>
            </view>
            <view class="textarea-box1">
                <view class="info-item">
                    <text>姓名：</text>
                    <text>{{sign_info.name}}</text>
                </view>
                <view class="info-item">
                    <text>班级：</text>
                    <text>{{sign_info.clas}}</text>
                </view>
                <view class="info-item">
                    <text>MBTI人格：</text>
                    <text>{{sign_info.mbti}}</text>
                </view>
                <view class="info-item">
                    <text>个人简介：</text>
                    <text>{{sign_info.brief}}</text>
                </view>
            </view>

            <view class="time-publish">
                <text>发布时间：{{handleTime(sign_info.add_time)}}</text>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            activityId: '',
            accountId: '',
            tabIndex: 0,
			tabs: [{
				id: 0,
				name: '活动报名',
			},
			{
				id: 1,
				name: '活动参与'
			},
			{
				id: 2,
				name: '活动结果'
			},
			{
				id: 3,
				name: '活动心得'
			}],
            mbti_list: {ISTJ: '军事官人格/ISTJ', ISFJ: '守卫者人格/ISFJ', INFJ: '提倡者人格/INFJ', INTJ: '建筑师人格/INTJ', ISIP: '鉴赏家人格/ISIP', ISFP: '探险家人格/ISFP', INFP: '调停者人格/INFP', INIP: '逻辑学家人格/INIP', ESTP: '企业家人格/ESTP', ESFP: '竞选者人格/ESFP', ENFP: '竞选者人格/ENFP', ENTP: '辩论家人格/ENTP', ESTJ: '总经理人格/ESTJ', ESFJ: '执行官人格/ESFJ', ENFJ: '主人公人格/ENFJ', ENTJ: '指挥官人格/ENTJ'},
            activityResult: {},
            // 活动参与
            work_id: '',
			work_files: [],
			work_profile: '',
			// 活动心得
			exp_text: '',
			allMembers: [],
            activityInfo: {}, // 活动信息
            sign_info: {}, // 报名信息
            participateInState: '' // 参与活动状态
            
        }   
    },
    onLoad(options) {
        this.activityId = options.id
		this.participateInState = options.state
		// 当前用户的accountId
		let currentAccountId = uni.getStorageSync('tokenObj').accountId

		this.accountId = options.accountId || currentAccountId
		this.allMembers = uni.getStorageSync('allFindMembers')||[]
        this.getActivityParInfo()
    },
    methods: {
        // 获取活动详情
		getActivityParInfo(){
			this.getUserEnrollInfo()
            if (this.participateInState == 1) {
                this.api.get('activity/getActivityInfo', {
                    activityId: this.activityId
                }).then(res=>{
                    if(res.data.state != 'ok') return
                    this.activityInfo = res.data.activity
                
                })
            } else {
                this.getActivityStuInfo()
            }
				
			
		},
		// 获得报名信息
		getUserEnrollInfo(){
			
			this.api.get('activity/getUserEnrollInfo', {
				activityId: this.activityId,
				accountId: this.accountId
			}).then(res=>{
				// 用户信息
				let userInfo = getApp().globalData.userInfo;
				let newOrgGraders = getApp().globalData.baseInfo.newOrgGraders;
				let clasItem = newOrgGraders.find(clas=>Object.keys(clas)[0]==userInfo.clasId) || {}
				userInfo.clasName = Object.values(clasItem)[0]
				this.sign_info.clas = Object.values(clasItem)[0]
				this.sign_info.name = userInfo.name
                this.sign_info = res.data.activityEnroll || this.sign_info
			})
		},
        // 查询某个学生的活动参与情况
		getActivityStuInfo(){
			this.api.get('activity/getActivityUserJoinInfo', {
				activityId: this.activityId,
				accountId: this.accountId
			}).then(res=>{
				if(res.data.state != 'ok') return
                let info = res.data.activityUserInfo||{}
				this.activityResult = info
                this.work_id = info.id
                this.work_files = info.files?JSON.parse(info.files):[]
                this.work_profile = info.description
			})
		},
		handleTime(time){
			if(!time) return
			time = time.split(' ')[0].split('-').join('.')
			return time
		},
		changeTab(i){
			this.tabIndex = i
		},
    }
}
</script>
<style lang="less" scoped>
    .title{
		height: 104rpx;
		line-height: 104rpx;
		font-size: 34rpx;
		padding-left: 32rpx;
		font-weight: 600;
	}
    .activity-type{
		border-top: 20rpx solid #F9F9F9;
		padding: 25rpx 32rpx 0;
		background-color: #fff;
	}
	.tabs{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 68rpx;
		padding: 0 32rpx;
		background-color: #fff;
		position: relative;
		&::after{
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 200%;
			height: 2rpx;
			background-color: #EEEEEE;
			transform: scale(0.5) translateX(-50%);
		}
		text{
			line-height: 68rpx;
			color: #666666;
		}
		.active{
			font-weight: 600;
			color: #333;
			position: relative;
			&::after{
				position: absolute;
				content: '';
				height: 4rpx;
				width: 80rpx;
				background-color: #333333;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
	.sign-up, .participation{
		padding: 20rpx 32rpx 56rpx;
	}
	.sign-item{
		padding: 36rpx 0;
		display: flex;
		position: relative;
		font-size: 30rpx;
		&::after{
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 200%;
			height: 2rpx;
			background-color: #F0F0F0;
			transform: scale(0.5) translateX(-50%);
		}
		.name{
			width: 168rpx;
			margin-right: 10rpx;
			font-size: 28rpx;
		}
		input{
			width: 438rpx;
			font-size: 30rpx;
		}
		textarea{
			width: 438rpx;
			height: 92rpx;
			font-size: 30rpx;
		}
	}
    .close-btn{
        position: absolute;
        top: 0;
        right: 0;
        width: 40rpx;
        height: 40rpx;
    }
	.uni-combox{
		padding: 0;
		width: 500rpx;
	}
	// 活动结果
	.results{
		padding: 27rpx 32rpx 56rpx;
	}
	.res-item{
		display: flex;
		padding: 32rpx 0 60rpx;
		.name{
			margin-right: 20rpx;
			color: #999999;
			font-size: 30rpx;
			white-space: nowrap;
			line-height: 20rpx;
		}
		.score{
			font-size: 0;
			text-align: center;
			min-width: 200rpx;
			image{
				width: 93rpx;
				height: 107rpx;
			}
		}
		.medal-name{
			display: block;
			font-size: 24rpx;
			margin-bottom: 35rpx;
			line-height: 20rpx;
		}
		.score-text{
			margin-top: 35rpx;
			display: block;
			color: #162641;
			font-size: 38rpx;
		}
	}
	.eva-title{
		padding-bottom: 32rpx;
		color: #999999;
		font-size: 30rpx;
		border-bottom: 1rpx dotted rgba(0, 0,0, .1);
	}
	
	// 评价
	.eva-content{
		margin-top: 32rpx;
	}
	.info-time{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tea-info{
		display: flex;
		align-items: center;
		color: #333333;
		image{
			width: 78rpx;
			height: 78rpx;
			border-radius: 39rpx;
			margin-right: 24rpx;
		}
	}
	.eva-score{
		margin: 24rpx 0;
		display: flex;
		align-items: center;
		color: #999999;
		image{
			margin-right: 17rpx;
			width: 34rpx;
			height: 32rpx;
		}
	}
	.eva-text{
		color: #666666;
		font-size: 28rpx;
		line-height: 44rpx;
	}
	// 活动心得
	.experience{
		padding: 31rpx 32rpx  56rpx;
		textarea{
			width: 654rpx;
			height: 374rpx;
			
		}
	}
	.text-box{
		padding: 32rpx;
		background-color: #F4F4F4;
		border-radius: 20rpx;
	}
	.text-box-show{
		padding: 32rpx 0;
		line-height: 44rpx;
	}
	.ex-btn{
		margin-top: 56rpx;
		text-align: center;
		text{
			display: inline-block;
			width: 320rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 20rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
	}
	.keep-btn{
		color: #333333;
		position: relative;
		margin-right: 30rpx;
		&::after{
			position: absolute;
			left: -160rpx;
			top: -40rpx;
			content: '';
			width: 640rpx;
			border: 2rpx solid #999999;
			border-radius: 40rpx;
			height: 160rpx;
			transform: scale(0.5);
		}
	}
	.share-btn{
		background-color: #28C2CD;
		color: #fff;
	}

    .task-box {
        padding: 0 32rpx 0;
    }
    .textarea-box1{
		border-radius: 20rpx;
		border: 1rpx solid #EEEEEE;
		padding: 0 32rpx 32rpx;
	}
    .task-title{
		color: #333333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
		.title-text{
			width: 82%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}
	.info-item{
		margin-top: 32rpx;
		color: #666666;
	}
    .time-publish{
		margin-top: 24rpx;
		color: #999;
		font-size: 24rpx;
	}
</style>